import { FullToken, GenerateStyle } from 'antd/es/theme/interface';
import { genComponentStyleHook, mergeToken } from 'antd/es/theme/internal';

export interface SfwPanelResizeHandleToken extends FullToken<'Grid'> {
  sfwPanelResizeHandleBgActive: string;
}

const genSfwPanelResizeHandleStyle: GenerateStyle<SfwPanelResizeHandleToken> = (
  token,
) => {
  return {
    [token.componentCls]: {
      flex: `0 0 ${token.marginSM}px`,
      margin: token.marginXXS,
      borderRadius: token.borderRadius,
      display: 'flex',
      justifyContent: 'stretch',
      alignItems: 'stretch',
      outline: 'none',
      transition: 'background-color 0.2s linear',
    },
    [`${token.componentCls}[data-resize-handle-active="keyboard"],${token.componentCls}[data-resize-handle-active="pointer"]`]:
      {
        backgroundColor: token.sfwPanelResizeHandleBgActive,
      },
    [`@media (pointer: coarse)`]: {
      [token.componentCls]: {
        flex: '0 0 24px',
      },
    },
  };
};

// 如何使用样式第一步，定义样式
export default genComponentStyleHook('Grid', (token) => {
  const sfwPanelResizeHandleToken = mergeToken<SfwPanelResizeHandleToken>(
    token,
    {
      sfwPanelResizeHandleBgActive: token.colorFillContentHover,
    },
  );
  return [genSfwPanelResizeHandleStyle(sfwPanelResizeHandleToken)];
});
